import React, {useEffect, useState} from "react";
import AceEditor from "react-ace";
import 'ace-builds/src-noconflict/snippets/sh';
import 'ace-builds/src-noconflict/theme-xcode';


interface CodeProps {
    styles: React.CSSProperties | undefined;
    onChange: (val: string) => void;
    value: string
}

export const CodeEditor:React.FC<CodeProps> = ({styles, value, onChange}) => {

    const [data, setData] = useState<string>(value)

    const callValue = (value: string) => {
        setData(value)
        onChange(value)
    }


    return <div style={{border: '1px solid #d3d3d3'}}>
        <AceEditor
            mode="sh"
            theme="xcode"
            value={data}
            fontSize={13}
            style={styles}
            onChange={(value) => callValue(value)}
            setOptions={{
                enableBasicAutocompletion: true,   //启用基本自动完成功能 不推荐使用
                enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
                enableSnippets: true,  //启用代码段
                showLineNumbers: true,
                tabSize: 2,
                wrap: true, // 换行
                autoScrollEditorIntoView: true, // 自动滚动编辑器视图
            }}
        />
    </div>

}